html, body {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
}

.loader {
	width: 150px;
	height: 150px;
	position: relative;
}

.loader span {
	position: absolute;
	box-sizing: border-box;
	border: 10px solid dimgray;
	border-radius: 2px;
	animation: rotating linear infinite;
}

.loader span:nth-child(1) {
	width: 100%;
	height: 100%;
	animation-duration: 4s;
	z-index: 3;
}

.loader span:nth-child(2) {
	width: 70%;
	height: 70%;
	margin: 15%;
	animation-duration: 2s;
	z-index: 2;
}

.loader span:nth-child(3) {
	width: 40%;
	height: 40%;
	margin: 30%;
	animation-duration: 1s;
	z-index: 1;
}

.loader span::before,
.loader span::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 50%;
	background-color: gold;
}

.loader span::before {
	top: -10px;
	left: -10px;
}

.loader span::after {
	bottom: -10px;
	right: -10px;
}

@keyframes rotating {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(360deg);
	}
}
